<template>
  <div class="app-container">
    <el-form :inline="true" :model="filters" ref="refForm" class="demo-form-inline filter-container">
      <el-form-item prop="time" label="查询时间">
        <el-date-picker
          v-model="form.orderTime"
          class="filter-item"
          type="datetimerange"
          align="right"
          unlink-panels
          :range-separator="$t('language.finance.recharge.to')"
          :start-placeholder="$t('language.finance.recharge.startDate')"
          :end-placeholder="$t('language.finance.recharge.endDate')"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerDayStep">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="time" label="派奖时间">
        <el-date-picker
          v-model="form.payoutTime"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="center"
          :picker-options="pickerDayStep"
          unlink-panels
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="time" label="同步时间">
        <el-date-picker
          v-model="form.createTime"
          class="filter-item"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          align="right"
          :picker-options="pickerDayStep"
          unlink-panels
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="time"
                    label="统计时间">
        <el-date-picker v-model="form.timestamp"
                        class="filter-item"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        align="right"
                        unlink-panels
                        :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="下注金额：" prop="minAmount">
        <el-input v-model="filters.minAmount" style="width: 100px;"/>
      </el-form-item>
      <span class="form-center-tip">至</span>
      <el-form-item prop="maxAmount">
        <el-input v-model="filters.maxAmount" style="width: 100px;"/>
      </el-form-item>

      <el-form-item label="公司输赢：" prop="minProfit">
        <el-input v-model="filters.minProfit" style="width: 100px;"/>
      </el-form-item>
      <span class="form-center-tip">至</span>
      <el-form-item prop="maxProfit">
        <el-input v-model="filters.maxProfit" style="width: 100px;"/>
      </el-form-item>
      <el-form-item label="游戏账户名:"
                    prop="merUsername">
        <el-input v-model="filters.merUsername"
                  style="width: 100px;" />
      </el-form-item>
      <el-form-item label="会员账户名：" prop="username">
        <el-input v-model="filters.username" style="width: 100px;"/>
      </el-form-item>
      <el-form-item label="所属代理：" prop="proxy">
        <el-input v-model="filters.proxy" style="width: 100px;"/>
      </el-form-item>
      <el-form-item label="注单号：" prop="orderId">
        <el-input v-model="filters.orderId" styltee="width: 100px;"/>
      </el-form-item>

      <el-form-item label="注单状态：" prop="status">
        <el-select :collapse-tags="true"
                   multiple
                   v-model="filters.status">
          <el-option v-for="item in consts.NOTE_LB_STATUS"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="第三方订单号：" prop="merOrderId">
        <el-input v-model="filters.merOrderId" styltee="width: 100px;"/>
      </el-form-item>
      <el-form-item label="游戏平台："
                    prop="channelId">
        <el-select :collapse-tags="true"
                   multiple
                   v-model="filters.gamePlatformId">
          <el-option v-for="item in consts.GAME_ID"
                     v-show="lotteryArray.includes(item.value)"
                     :key="item.gamePlatformId"
                     :label="item.title"
                     :value="item.gamePlatformId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="roleCheck('virtual')" class="with-pre-select" label="数据类型">
        <el-select v-model="filters.isFake">
          <el-option v-for="item in consts.STATISTICS_RANGE"
                     :key="item.value"
                     :label="item.title"
                     :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" v-waves icon="el-icon-search" @click="submitFilterForm(filters)">搜索</el-button>
      <el-button @click="resetFilter">重置</el-button>
    </el-form>
    <div style="padding: 20px 0">
      <el-button-group>
        <el-button size="mini" type="primary" icon="el-icon-download" v-if="roleCheck('export')" @click="downLoadExcel({ action : 'getExportExcel' })">导出
        </el-button>
      </el-button-group>
    </div>
    <el-table max-height='540'
              :data="tableData.list"
              v-loading="loading"
              element-loading-text="给我一点时间" border fit
              highlight-current-row
              show-summary
              :summary-method="getLocalSummaries"
              style="width: 100%">
      <el-table-column label="第三方订单号" align="center" width="110px">
        <template slot-scope="{row}">
          {{row.merOrderId}}
        </template>
      </el-table-column>
      <el-table-column label="下注时间" align="center" width="90px">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="派彩时间" align="center" width="90px">
        <template slot-scope="{row}">
          {{row.payoutTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="账户名" align="center">
        <template slot-scope="{row}">
          {{row.userName}}
        </template>
      </el-table-column>

      <el-table-column label="游戏账户名" align="center">
        <template slot-scope="{row}">
          {{row.merUsername}}
        </template>
      </el-table-column>
      <el-table-column label="游戏平台" align="center">
        <template slot-scope="{row}">
          {{row.channelName}}
        </template>
      </el-table-column>
      <el-table-column label="子游戏" align="center">
        <template slot-scope="{row}">
          {{row.gameName}}
        </template>
      </el-table-column>
      <el-table-column label="投注内容" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.betDetails}}
        </template>
      </el-table-column>
      <el-table-column label="游戏结果" align="center" width="160px">
        <template slot-scope="{row}">
          {{row.gameResult}}
        </template>
      </el-table-column>
      <el-table-column label="注单状态" align="center" width="82px">
        <template slot-scope="{row}">
          <el-tag>
            {{row.ticketStatus | toConverter('NOTE_LB_STATUS')}}
          </el-tag>
        </template>
      </el-table-column>

      <!--重新计算盈亏新增字段-->
      <!-- <el-table-column label="平台做庄总投注额" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">平台做庄总投注额</template>
      </el-table-column>
      <el-table-column label="平台坐庄有效投注额" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">平台做庄有效投注额</template>
      </el-table-column>
      <el-table-column label="平台做庄派彩额" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">平台做庄派彩额</template>
      </el-table-column>
       <el-table-column label="平台做庄公司输赢" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">平台做庄公司输赢</template>
      </el-table-column>
       <el-table-column label="玩家对战投注额" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">玩家对战投注额</template>
      </el-table-column>
      <el-table-column label="玩家对战玩家输赢" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">玩家对战玩家输赢</template>
      </el-table-column>
      <el-table-column label="玩家对战公司抽水" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">玩家对战公司抽水</template>
      </el-table-column>
      <el-table-column label="公司总盈利" align="center" width="130" prop="" sortable>
        <template slot-scope="{row}">公司总盈利</template>
      </el-table-column> -->


      <el-table-column label="下注金额" align="center" prop="amount">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="派彩金额" align="center" prop="prize">
        <template slot-scope="{row}">
          {{row.prize | currency}}
        </template>
      </el-table-column>

      <el-table-column label="同步时间" align="center" width="90px">
        <template slot-scope="{row}">
          {{row.syncTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="公司输赢" align="center" prop="totalWin">
        <template slot-scope="{row}">
          {{row.totalWin | currency}}
        </template>
      </el-table-column>
      <el-table-column label="公司有效投注" align="center" prop="effectiveAmount">
        <template slot-scope="{row}">
          {{row.effectiveAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column label="注单号" align="center" width="110px">
        <template slot-scope="{row}">
          {{row.orderId}}
        </template>
      </el-table-column>
      <el-table-column label="所属代理" align="center">
        <template slot-scope="{row}">
          {{row.parentName}}
        </template>
      </el-table-column>
      <el-table-column label="活动流水" align="center" prop="validAmount">
        <template slot-scope="{row}">
          {{row.validAmount | currency}}
        </template>
      </el-table-column>

      <el-table-column label="备注" align="center">
        <template slot-scope="{row}">
          {{row.validRemark}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { form, grid, pickerOption } from '@/build';

import {
  gameStatisticListApi as listApi, exportGameManagerDetail,
} from '@/services/api/game';

export default {
  name: 'game-detail',

  mixins: [form, grid, pickerOption],

  // components: {
  //   AdvertisingEdit,
  // },

  data() {
    const form = this.$route.query;
    const time = form.time ? [moment(form.time[0]).format('YYYY-MM-DD HH:mm:ss'), moment(form.time[1]).format('YYYY-MM-DD HH:mm:ss')] : [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')];
    return {
      localSummariesText: '当前页汇总 / 所有页汇总',
      lotteryArray: [consts.LB_TICKET, consts.WIN_WIN_LOTTERY, consts.FIVE_GM_LOTTERY],
      form: {
        orderTime: [time[0], time[1]],
        payoutTime: [],
        createTime: [],
        timestamp: [],
        isFake: 0,
      },
      filters: {
        startTime: time[0],
        endTime: time[1],
        payoutStartTime: undefined,
        payoutEndTime: undefined,
        createStartTime: undefined,
        createEndTime: undefined,
        timestampStartTime: undefined,
        timestampEndTime: undefined,
        minAmount: undefined,
        maxAmount: undefined,
        minProfit: undefined,
        maxProfit: undefined,
        // channelId: 8,
        // gameId: form.gameId ? form.gameId : undefined,
        gamePlatformId: [8000, 19000, 12000],
        username: undefined,
        proxy: undefined,
        orderId: undefined,
        merOrderId: undefined,
        status: _.map(consts.NOTE_LB_STATUS, item => item.value),
        page: 1,
        size: 20,
        isFake: 0,
        merUsername: '',
      },
      tableData: {
        list: [],
        sum: {
          win: 0,
          prize: 0,
          amount: 0,
          validAmount: 0,
          effectAmount: 0,
        },
      },
      statistic: [
        {
          index: 10,
          prop: 'amount',
          format: value => <div> {_.currency(value)}/ {_.currency(this.tableData.sum.amount)}</div >,
        },
        {
          index: 11,
          prop: 'prize',
          format: value => <div> {_.currency(value)}/ {_.currency(this.tableData.sum.prize)}</div >,
        },
        {
          index: 13,
          prop: 'totalWin',
          format: value => <div > {_.currency(value)}/ {_.currency(this.tableData.sum.win)}</div >,
        },
        {
          index: 14,
          prop: 'effectiveAmount',
          format: value => <div > {_.currency(value)}/ {_.currency(this.tableData.sum.effectAmount)}</div >,
        },
        {
          index: 17,
          prop: 'validAmount',
          format: value => <div > {_.currency(value)}/ {_.currency(this.tableData.sum.validAmount)}</div >,
        },
      ],
    };
  },

  methods: {
    resetFilter() {
      this.resetForm('refForm');
      this.submitFilterForm(this.filters);
    },
    transferChannelId() {

    },

  },

  mounted() {
    if (this.$route.query.gamePlatformId) {
      const { gamePlatformId } = this.$route.query;
      this.filters.gamePlatformId = [gamePlatformId];
    }
    this.bindGet(listApi, 'tableData', {
      action: 'getGrid',
      sendingData: 'form',
      beforeSend: (data) => {
        let {
          orderTime, payoutTime, createTime, timestamp,
        } = data;
        if (!orderTime || orderTime.length !== 2) {
          orderTime = [undefined, undefined];
        }
        if (!payoutTime || payoutTime.length !== 2) {
          payoutTime = [undefined, undefined];
        }
        if (!createTime || createTime.length !== 2) {
          createTime = [undefined, undefined];
        }
        if (!timestamp || timestamp.length !== 2) {
          timestamp = [undefined, undefined];
        }
        return {
          ...this.filters,
          startTime: orderTime[0],
          endTime: orderTime[1],
          payoutStartTime: payoutTime[0],
          payoutEndTime: payoutTime[1],
          createStartTime: createTime[0],
          createEndTime: createTime[1],
          timestampStartTime: timestamp[0],
          timestampEndTime: timestamp[1],
          gamePlatformId: this.filters.gamePlatformId.join(','),
          status: this.filters.status.join(','),
        };
      },
    });
    this.doGet({ action: 'getGrid' });

    // let channelId = this.$route.query.channelId;
    // if (channelId) {
    //   this.filters.channelId = channelId;
    // }
    this.bindGet(exportGameManagerDetail, '', {
      action: 'getExportExcel',
      sendingData: 'form',
      beforeSend: (data) => {
        let {
          orderTime, payoutTime, createTime, timestamp,
        } = data;
        if (!orderTime || orderTime.length !== 2) {
          orderTime = [undefined, undefined];
        }
        if (!payoutTime || payoutTime.length !== 2) {
          payoutTime = [undefined, undefined];
        }
        if (!createTime || createTime.length !== 2) {
          createTime = [undefined, undefined];
        }
        if (!timestamp || timestamp.length !== 2) {
          timestamp = [undefined, undefined];
        }
        return {
          ...this.filters,
          startTime: orderTime[0],
          endTime: orderTime[1],
          payoutStartTime: payoutTime[0],
          payoutEndTime: payoutTime[1],
          createStartTime: createTime[0],
          createEndTime: createTime[1],
          timestampStartTime: timestamp[0],
          timestampEndTime: timestamp[1],
          gamePlatformId: this.filters.gamePlatformId.join(','),
          status: this.filters.status.join(','),
        };
      },
      callback:([result,data])=>{
        if(!result){
          this.$message({
            type: 'error',
            message: data.message,
          })
        }else{
          this.$message({
            type: 'warning',
            message: '正在导出，请稍后下载',
          })
        }
      }
    });
  },
};
</script>
<style lang="scss" scoped>
  .form-center-tip {
    line-height: 36px;
    padding-right: 10px;
  }
</style>
